<template>
	<view>
		<u-popup :show="show" :round="10" mode="center" @close="close" :closeable="true" round="30rpx">
			<view class="packPop">
				<view class="packHeader">背包</view>
				<view class="arrStyle">
					<view @click="handleIndex(index)" v-for="(item,index) in arr" :key="index"
						:class="index==indexID?'itemStyle':'itemStyle_active'">{{item}}</view>
				</view>
				<view class="materialStyle">
					<view class="scroll-Y">
						<view v-if="list.length>0" v-for="(item,index) in list" :key="index" class="scrollBlock">
							<image v-if="indexID==0"  @error="handleError(index)" :src="item.materialUrl" mode="widthFix" style="width: 150rpx;border-radius: 10rpx;"></image>
							<image v-if="indexID==1"  @error="handleError(index)" src="/static/public-images/bx.png" mode="widthFix" style="width: 150rpx;border-radius: 10rpx;"></image>
							<view class="synthesis" v-if="indexID==0 && item.number>1" @click="synthesis(item)">合成</view>
							<view class="synthesis" v-if="indexID==1" @click="handChest(item)">开箱</view>
							<view class="sj">{{item.materialName || '合成石'}}</view>
							<view class="sjsun">x{{item.number || 0}}</view>
						</view>
						<view v-if="list.length==0" class="none">
							暂无{{indexID==0?'升级石':'宝箱'}}
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<chestVue  @getBox="getBoxList" :show="chestShow" @success="chestClick" :itemBox="itemBox"/>
		<successful ref="successfulRef" :show="successful" @success="successful = false"/>
		<failure :show="failure" ref="failureRef" @success="failure = false"/>
	</view>
</template>

<script>
	import failure from './Failure/index.vue'
	import successful from './successful/index.vue'
	import config from '@/config';
	import {syntheticMalist,syntheticMa,boxList} from '@/api/my.js'
	import chestVue from './chest.vue';
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		components:{
			chestVue,
			successful,
			failure
		},
		data() {
			return {
				failure:false,
				successful:false,
				imgUrl:config.uploadUrl,
				chestShow:false,
				indexID: 0,
				arr: ['升级石', '宝箱'],
				list:[],
				itemBox:{}
			}
		},
		methods: {
			// 合成按钮
			async synthesis(item){
				try {
					console.log('合成:',item.syntheticId);
					let data={
						syntheticIds: [item.syntheticId,item.syntheticId]
					}
					let res = await syntheticMa(data)
					uni.showToast({
						title:'合成成功',
						icon:'none',
						duration:3000
					})
					// this.successful = true
					// this.$refs.successfulRef.startSynth()
					this.getMalist()
				} catch (error) {
					// this.failure = true
					// this.$refs.failureRef.startProcess()
					this.getMalist()
				}
			},
			// 获取合成石数据
			async getMalist(){
				this.indexID = 0
				let res = await syntheticMalist()
				this.list = res.data.map(item=>{
					return{
						...item,
						materialUrl:this.imgUrl+item.materialUrl
					}
				})
			},
			// 获取宝箱数据
			async getBoxList(){
				let res = await boxList()
				this.list = res.data.map(item=>{
					return{
						...item,
						materialUrl:this.imgUrl+item.materialUrl
					}
				})
			},
			// 图片报错占位图
			handleError(index) {
				this.list[index].materialUrl = '/static/icon-images/rocket.png';
			},
			// 开宝箱
			handChest(item){
				this.itemBox = item
				this.chestShow = true
			},
			// 点击升级石和宝箱
			handleIndex(index) {
				this.indexID = index
				this.list = []
				if(index==0){
					this.getMalist()
				}
				if(index == 1){
					this.getBoxList()
				}
			},
			close() {
				this.$emit('success')
			},
			chestClick(){
				this.chestShow = false
				this.itemBox = {}
			}
		}
	}
</script>

<style scoped>
	.synthesis{
		width: 130rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #497CF6;
		border-radius: 40rpx;
		margin-top: 15rpx;
		color: #FFFFFF;
		font-size: 25rpx;
	}
	.none{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		opacity: 0.8;
	}
	.sjsun{
		min-width: 40rpx;
		height: 40rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #FFFFFF;
		background-color: #000000;
		padding: 0 10rpx;
		box-sizing: border-box;
		position: absolute;
		right: 15rpx;
		top: 15rpx;
	}
	.sj{
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 15rpx;
	}
	.scrollBlock {
		width: 320rpx;
		height: 300rpx;
		background-color: rgba(30, 41, 59, 0.5); 
		border-radius: 20rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		box-sizing: border-box;
		position: relative;
	}

	.scroll-Y {
		width: 710rpx;
		min-height: 400rpx;
		display: flex;
		flex-wrap: wrap;
		overflow: auto;
		padding: 0 6rpx;
		box-sizing: border-box;
	}

	.materialStyle {
		width: 100%;
		height: calc(100vh - 550rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40rpx;
	}

	.itemStyle_active {
		width: 200rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 70rpx;
		color: #FFFFFF;
		margin-right: 20rpx;
	}

	.itemStyle {
		width: 200rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 70rpx;
		background: linear-gradient(to right, #497CF6, #7E62F6);
		color: #FFFFFF;
		margin-right: 20rpx;
	}

	.arrStyle {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.packHeader {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 35rpx;
		color: #FFFFFF;
		font-weight: 700;
	}

	.packPop {
		width: 710rpx;
		height: calc(100vh - 300rpx);
		background-color: #131B26;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 25rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
	}
</style>